<template>
    <load-more @load-more="loadMore" height="100vh">
    <div class="home">
            <div class="banner">
                <div class="content">
                    <!--海报轮播图-->
                    <swiper :auto="true"  @on-index-change="" v-model="swiperIndex" dots-position="center"
                             :loop="loop" :show-dots="show_dots" height="100%">
                        <swiper-item v-for="(item,index) in banners" :key="index">
                            <div class="swiper-box" :class="[index == swiperIndex ? 'index-box' : '']">
                                <div class="img">
                                    <img :src="item.image" alt="">
                                </div>
                            </div>
                        </swiper-item>
                    </swiper>
                    <div class="scroll flex">
                        <img src="../../assets/img/home-laba.png" alt="">
                        <marquee v-if="record.length">
                            <marquee-item v-for="(item,index) in record" :key="index" @click.native="onClick(i)" class="align-middle">{{item.username}}提现了{{item.money}}元</marquee-item>
                        </marquee>
                        <span class="align-middle" v-else>暂无公告</span>
                    </div>
                </div>
            </div>
            <div class="container">
                <ul class="tabs flex-between">
                    <li @click="getData(1);now_page=1">
                        <img src="../../assets/img/home-tab1.png" alt="">
                    </li>
                    <li @click="getData(2);now_page=1">
                        <img src="../../assets/img/home-tab2.png" alt="">
                    </li>
                </ul>
                <div class="list-item" v-for="(item, index) in dataList" :key="index">
                    <List :imgurl="item.images.split(',')[0]"
                          :id="item.id"
                          :uid="item.uid"
                          :title="item.title"
                          :min_money="item.cmoney"
                          :max_money="item.money"
                          :avater="item.avatar"
                          :name="item.nickname"
                          :date="item.create_time"
                    ></List>
                </div>
                <div style="height:70px;"></div>
            </div>
        </div>
    </load-more>
</template>

<script>
    import { Swiper, SwiperItem,XImg,Marquee, MarqueeItem } from 'vux'
    import LoadMore from '@/components/upload'
    import List from '@/components/list'
    export default {
        components:{
            Swiper, SwiperItem,XImg,List,LoadMore,Marquee, MarqueeItem
        },
        name: "index",
        data(){
            return {
                loop:true,
                swiperIndex:2,
                show_dots:false,
                banners:[],
                logo: require('../../assets/img/banner.png'),
                imgurl: require('../../assets/img/banner.png'),
                dataList:[],
                onFetching: false,
                bottomCount: 0,
                now_page:1,
                type:1,
                has_more:true,
                record:[]
            }
        },
        mounted(){
            this.getData();
            this.getBanner();
            this.getRcord()
        },
        methods:{
            getRcord(){
              this.$http.post('/index/withdrawMessage',{}).then(res=>{
                  console.log(res)
                  this.record = res.data
              })
            },
            getBanner(){
                this.$http.post("index/banner",{}).then(res=>{
                    console.log(res)
                    this.banners = res.data;
                })
            },
            getData(type = 1,page=1){
                if(page == 1){
                    this.dataList = []
                }
                this.type = type;
                this.$http.post('index/crowdfundingList',{
                    type:this.type,
                    page:page
                }).then(res=>{
                    console.log(11)
                    console.log(res)
                    let data = this.dataList
                    this.dataList = data.concat(res.data.data);
                    this.has_more = res.data.has_more
                })
            },
            //上拉加载
            loadMore (func) {
                if(this.has_more){
                    this.now_page += 1;
                    this.getData(this.type,this.now_page)
                    func();
                }
            },
        }
    }
</script>

<style scoped lang="less">
    .home{
        width: 750px;
        overflow: hidden;
        .content{
            position: relative;
            width: 120%;
            height:330px;
            left:-10%;
            margin: auto;
            padding-top: 44px;
            padding-bottom: 80px;
            background: #fff;
            .scroll{
                position: absolute;
                bottom:25px;
                left:calc(50% - 345px);
                width: 690px;
                height: 64px;
                background-color: #d1dfff;
                border-radius: 32px;
                box-sizing: border-box;
                padding-right: 20px;
                color:#185fff;
                img{
                    width: 38px;
                    margin: 0 20px 0 30px;
                }
            }
            /deep/ .vux-slider{
                width: 70%;

                margin: 0 auto;
                overflow: visible;
                .vux-swiper{
                    overflow: visible;
                    .vux-swiper-item{
                        text-align: center;
                        .swiper-box{
                            width:100%;
                            margin: 0 auto;
                            transition: all 1s;
                            .img{
                                width: 92%;
                                height: 405px;
                                margin: 0 auto;
                                img{
                                    width: 100%;
                                    height:280px;
                                    object-fit: cover;
                                }
                            }
                        }
                        .index-box{
                            transform: scale(1.1);
                            transition: all .5s;
                        }
                    }
                }
            }
            .bottom-index{
                position: absolute;
                bottom: 0;
                min-height: 40px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size:15px ;
                color:#333333
            }
        }
        .container{
            padding: 30px;
            background: white;
            margin-top: 20px;
            .tabs img{
                width: 330px;
            }
            .list-item{
                border-bottom: 2px solid #f0f0f0;
            }
        }

    }
</style>
